<template>
  <div>
    <middle-label v-model="index" v-bind:labels="labels"></middle-label>
    <div>
      <el-card class="content">
        <el-row>
          <el-col :span="6">
            <span>采集设备名称：</span>
            <el-select
              placeholder="请输入传感器名称"
              value=""
              style="width: 200px"
            ></el-select>
          </el-col>
          <el-col :span="6">
            <span>监测体名称：</span>
            <el-select
              placeholder="请输入监测体名称"
              value=""
              style="width: 200px"
            ></el-select>
          </el-col>
          <el-col :span="6">
            <el-button class="black-button">查询</el-button>
            <el-button type="warning" @click="dialog_flag = true"
              >设置</el-button
            >
          </el-col>
        </el-row>
        <el-table :data="table_data" stripe size="small">
          <el-table-column
            label="采集设备名称"
            prop="equipment_name"
          ></el-table-column>
          <el-table-column
            label="采集设备标识"
            prop="device_identifier"
            width="240px"
          ></el-table-column>
          <el-table-column
            label="监测体名称"
            prop="monitoring_body_name"
          ></el-table-column>
          <el-table-column label="△X上限" prop="x_ceiling"></el-table-column>
          <el-table-column label="△Y上限" prop="y_ceiling"></el-table-column>
          <el-table-column label="△H上限" prop="h_ceiling"></el-table-column>
          <el-table-column
            label="创建时间"
            prop="create_time"
          ></el-table-column>
          <el-table-column label="操作" prop="operation" width="120px">
            <template>
              <el-button type="text" size="small">修改</el-button>
              <el-button type="text" size="small">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-row type="flex" justify="end">
          <!-- <el-col :span="10"> -->
          <el-pagination
            background
            layout="prev, pager, next, jumper"
            :total="8"
          >
          </el-pagination>
          <!-- </el-col> -->
        </el-row>
      </el-card>
      <el-dialog title="增加阀值" :visible.sync="dialog_flag" width="25%">
        <el-form ref="form" label-position="left" label-width="120px">
          <el-form-item label="采集设备名称">
            <el-select
              placeholder="北斗表面位移2#"
              value=""
              style="display: flex"
            ></el-select>
          </el-form-item>
          <el-form-item label="△X上限">
            <el-input placeholder="请输入△X上限"></el-input>
          </el-form-item>
          <el-form-item label="△Y上限">
            <el-input placeholder="请输入△Y上限"></el-input>
          </el-form-item>
          <el-form-item label="△H上限">
            <el-input placeholder="请输入△H上限"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="dialog_flag = false"
              >确定</el-button
            >
            <el-button @click="dialog_flag = false">取消</el-button>
          </el-form-item>
        </el-form>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import MiddleLabel from "~/components/MiddleLabel";

export default {
  name: "InternalDisplacement",
  components: {
    MiddleLabel,
  },
  data() {
    return {
      index: 0,
      labels: ["红色预警", "橙色预警", "黄色预警"],
      table_data: [
        {
          equipment_name: "NBWY-08",
          device_identifier: "MONI20170517215113187KQS",
          monitoring_body_name: "福州灯马穴山坡滑坡点",
          x_ceiling: "800mm",
          y_ceiling: "800mm",
          h_ceiling: "800mm",
          create_time: "2019-08-20 15:45:40",
        },
        {
          equipment_name: "NBWY-07",
          device_identifier: "MONI201705172149306853ZW",
          monitoring_body_name: "福州大王池山坡滑坡点",
          x_ceiling: "800mm",
          y_ceiling: "800mm",
          h_ceiling: "300mm",
          create_time: "2019-06-24 09:34:23",
        },
        {
          equipment_name: "NBWY-06",
          device_identifier: "MONI20170517215022245943",
          monitoring_body_name: "福州金瓜山坡滑坡点",
          x_ceiling: "800mm",
          y_ceiling: "800mm",
          h_ceiling: "300mm",
          create_time: "2019-06-24 09:34:38",
        },
        {
          equipment_name: "NBWY-05",
          device_identifier: "MONI201705140048106806UD",
          monitoring_body_name: "福州天台山坡滑坡点",
          x_ceiling: "800mm",
          y_ceiling: "800mm",
          h_ceiling: "300mm",
          create_time: "2019-06-24 09:34:46",
        },
        {
          equipment_name: "NBWY-04",
          device_identifier: "MONI20170514004742953MGV",
          monitoring_body_name: "福州马头山坡滑坡点",
          x_ceiling: "800mm",
          y_ceiling: "800mm",
          h_ceiling: "300mm",
          create_time: "2019-06-24 09:34:54",
        },
        {
          equipment_name: "NBWY-03",
          device_identifier: "MONI20170514004610542GLA",
          monitoring_body_name: "福州启岭山坡滑坡点",
          x_ceiling: "800mm",
          y_ceiling: "800mm",
          h_ceiling: "300mm",
          create_time: "2019-06-24 09:35:02",
        },
        {
          equipment_name: "NBWY-02",
          device_identifier: "MONI20170514004543490Z97",
          monitoring_body_name: "福州松岩山坡滑坡点",
          x_ceiling: "800mm",
          y_ceiling: "800mm",
          h_ceiling: "300mm",
          create_time: "2019-06-24 09:35:13",
        },
        {
          equipment_name: "NBWY-01",
          device_identifier: "MONI20170514004508023I7L",
          monitoring_body_name: "福州高垄山坡滑坡点",
          x_ceiling: "800mm",
          y_ceiling: "800mm",
          h_ceiling: "300mm",
          create_time: "2019-06-24 09:35:31",
        },
      ],
      dialog_flag: false,
      type: [],
      value: "",
    };
  },
};
</script>

<style scoped>
.content {
  height: 82vh;
}

.black-button {
  background-color: black;
  color: white;
}
</style>
